<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
        
        
        <title>Seller Map  Project v2</title>
        <link rel="stylesheet" href="javascripts/libs/OL/theme/default/style.css" type="text/css"/>
        <link rel="stylesheet" href="csss/anunciosFree.css" type="text/css"/>
        <script src="http://maps.google.com/maps/api/js?v=3.5&amp;sensor=false"/>
        <script src='javascripts/libs/OL/OpenLayers.js'></script>
        <script src='javascripts/Init.js'></script>
        <script type="text/javascript" src="http://slideshow.triptracker.net/slide.js"></script>
        <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
        
        
        <style type="text/css">
              html, body, #map {
                margin: 0;
                width: 100%;
                height: 100%;
            }
            
             
             
            
             #free{
                position: absolute;
                bottom: 4em;
                left: 1em;
                width: 10%;
                height: 3%;
                font-size: 18pt;
                z-index: 20000;
                background-color: transparent;
                padding: 0 0.5em 0.5em 0.5em;
            }
            
            #freeInv{
                position: absolute;
                bottom: 4em;
                left: 1em;
                width: 10%;
                height: 3%;
                font-size: 18pt;
                z-index: 20000;
                background-color: transparent;
                padding: 0 0.5em 0.5em 0.5em;
            }
            
            #displaybox {
	z-index: 10000;
	filter: alpha(opacity=50); /*older IE*/
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */
	-moz-opacity: .50; /*older Mozilla*/
	-khtml-opacity: 0.5;   /*older Safari*/
	opacity: 0.3;   /*supported by current Mozilla, Safari, and Opera*/
	background-color:#0000FF;
	position:fixed; top:0px; left:0px; width:100%; height:100%; color:#FF0000; text-align:center; vertical-align:middle;
            }
         
        </style>
            
        
        
        <script type="text/javascript">
            
            var map,viewer,gphy;
            var selectCtrl,formats,poly,jqxhr;
            var thefile ="file1_param";
            var thefile2="file2_param";
            var rino=self.setInterval(function(){disparaOfertas()},500);
            var pre="";
           

function ocultar()
{
        $("#text").hide("low", function ()
      {
        $(this).prev().hide("low", arguments.callee);
      });
      $("#freeInv").hide("low", function () { });
      
      rino=window.clearInterval(rino);

}

function mostrar()
{    
     $("#text").show(2000);
     $("#free").hide("low", function () { });
     $("#freeInv").show(3000);
     rino=self.setInterval(function(){disparaOfertas()},500);
}

function disparaOfertas()
{
    console.log("Log----aja!!!");
 
     $.ajax(
    {
        url: serverA,
        data: {file:thefile,file2:thefile2},
        success: function(response)
        {
           
                       if(response != pre){
                           console.log("L" + response);
                       $("li").remove();
                       $("#ofereitors").prepend(response).hide().each(function(i) {
                       jQuery(this).delay(400*i).animate({
        "height": "show",
        "marginTop": "show",
        "marginBottom": "show",
        "paddingTop": "show",
        "paddingBottom": "show"}, 333);
    
});}

pre=response;

        }
    });

}
        
            
            
            
            
            function updateFormats() {
        
            formats = {
              'out': {
                geojson: new OpenLayers.Format.GeoJSON({
                'internalProjection': map.baseLayer.projection,
                'externalProjection': new OpenLayers.Projection("EPSG:4326")
            })
               
              } 
            };
        }                  


function init() {
                viewer = new PhotoViewer();
                viewer.add('img/c1.png');
                viewer.add('img/c2.png');
                viewer.add('img/c3.png');
    
        $("#free").hide("low", function () {
      });
    
    
 var options = {
                projection: new OpenLayers.Projection("EPSG:900913"),
                displayProjection: new OpenLayers.Projection("EPSG:4326")
            };

map = new OpenLayers.Map("map",options);
var osm = new OpenLayers.Layer.OSM("osm");







/// EStilos al seleccionar y al deseleccionar
var style = new OpenLayers.Style({
                    fillColor: "#00ff22",
                    fillOpacity:"0.4",
                    strokeColor: "#aa9911",
                    strokeOpacity: "0.1",
                    strokeWidth: "5"
                });

var selectStyle = new OpenLayers.Style({
                    fillColor: "#0000ff",
                    fillOpacity:"0.3",
                    strokeColor: "#112222",
                    strokeOpacity: "0.1",
                    strokeWidth: "5"
                });

var stylemap=new OpenLayers.StyleMap({'default': style,
                         'select': selectStyle});
                         
                         
                         
     ///// ELEMENTOS PARA BING
var apiKey = "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf";
var road = new OpenLayers.Layer.Bing({
    key: apiKey,
    type: "Road",
    // custom metadata parameter to request the new map style - only useful
    // before May 1st, 2011
    metadataParams: {mapVersion: "v1"}
});        
                         
var aerial = new OpenLayers.Layer.Bing({
    key: apiKey,
    type: "Aerial"
});

var hybrid = new OpenLayers.Layer.Bing({
    key: apiKey,
    type: "AerialWithLabels",
    name: "Bing Aerial With Labels"
});                         
          ///FIN ELEMENTOS PARA BING               
                         
                poly = new OpenLayers.Layer.Vector("json externo", {
                    projection: map.displayProjection,
                    strategies: [new OpenLayers.Strategy.Fixed()],                
                    protocol: new OpenLayers.Protocol.HTTP({
                        url: serverW+"slpPreds.json",
                        format: new OpenLayers.Format.GeoJSON()
                    }),
                    styleMap: stylemap,
                    isBaseLayer: false
                });
                
               
                
            
    //map.events.on({ 'zoomend': zoomeador}); // utilizimo ya que por nivel de zoom puedes ver las capas o desaparecerlas   
            
    map.addLayers([hybrid,aerial,road,osm]);
    map.addLayer(poly);
    map.addControl(new OpenLayers.Control.LayerSwitcher());
    
               selectCtrl = new OpenLayers.Control.SelectFeature(poly,
              {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect}
                );
     
            map.addControl(selectCtrl);
            map.addControl(new OpenLayers.Control.MousePosition());
            selectCtrl.activate();
            updateFormats();
            map.setCenter(  transformToSphericalMercator( new OpenLayers.LonLat(-100.97437,22.14996)),14);
            
            
            
            
            ////****
            eventosOfertas();
    
}


         function eventosOfertas()
   {
    
    
     console.log("Log---------------Funcion eventos Ofertas---------------------------------")
    
       $("li").live("click", function(){
       console.log("Log---------------Event---------------------------------")
   
        //alert($('#'+this.id).attr("title"));  te muestra el titulo lonlat etiquetado en el json
        var lonlat=$('#'+this.id).attr("title");
        var l=lonlat.split(",");
        var lo=l[0];
        var la=l[1];
        map.setCenter(  transformToSphericalMercator( new OpenLayers.LonLat(parseFloat(lo),parseFloat(la))),17);
        
  
});
       
}


        function zoomeador(e){
            
          
                    if(map.getZoom() > 7){
                   poly.setVisibility(false);
                   // map.removeLayer(poly);
                     poly = new OpenLayers.Layer.Vector("json externo", {
                    projection: map.displayProjection,
                    strategies: [new OpenLayers.Strategy.Fixed()],                
                    protocol: new OpenLayers.Protocol.HTTP({
                        url: "examples/data/1345832914985.json",
                        format: new OpenLayers.Format.GeoJSON()
                    }),
                    styleMap: null,
                    isBaseLayer: false
                });
                    map.addLayer(poly);
          
          }
        
        
        console.log("Log --- adfadfasdfd" + map.getZoom());
    }

        function onPopupClose(evt) {
            selectCtrl.unselect(selectedFeature);
             $("#text").hide("fast", function () {
        // use callee so don't have to name the function
        $(this).prev().hide("fast", arguments.callee); 
      });
        }
        
        
        ///Cierra anuncios gratissss!!
         function freeClose() {
             $("#text").hide("low", function () {});
             $("#freeInv").hide("low", function () {});
             $("#free").show(2000);
             rino=window.clearInterval(rino);
        }
        
        
        function openFree(){
            $("#text").show(2000);
            $("#free").hide("low", function () {});
            $("#freeInv").show("low", function () {});
            
            
        }
        
        //Ejemplo comsumir datos de json y desplegar en javascript 
        function onFeatureSelect(feature) {
           selectedFeature = feature;
       
         var type = 'geojson';
         var pretty = false;
         var str = formats['out'][type].write(feature, pretty);
           str = str.replace(/,/g, ', ');
           var aja=eval('(' + str + ')');
            console.log("Log-->>" +aja.id);
            console.log("Log--->" +aja.properties.negocio);
           clicker();  //cierra el overlay 
    
   
               }
               
               
        function onFeatureUnselect(feature) {
           
             $("#text").hide("fast", function () {});
             $("#free").show(2000);
        }    
        
        
        


 function transformToSphericalMercator( wgs84LonLat) {
        	// Transforma desde SphericalMercator a WGS84
        	// Devuelve un OpenLayers.LonLat con el pto transformado
        	var clon = wgs84LonLat.clone(); // Si no uso un clon me transforma el punto original
        	var pointSphMerc= clon.transform(
                    new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                    new OpenLayers.Projection("EPSG:900913")); // to Spherical Mercator Projection;
        	return pointSphMerc;
        }
        
        
        
        //lo que sale al darle click al poligono  ....   overlay window 
        function clicker(){
       
	var thediv=document.getElementById('displaybox');
	if(thediv.style.display == "none"){
		thediv.style.display = "";
            thediv.innerHTML = ""+$("#lalala").html();//"<a id='overlai' href='javascript:void(viewer.show(0))'> Promociones !!! </a><br></br><a id='overlai' href='#' onclick='var algo2=ocultar();   return clicker();'>Regresar al mapa</a>";
    }else{
		thediv.style.display = 'none';
		thediv.innerHTML = '';
                 selectCtrl.unselect(selectedFeature);  //deselecciona la feature seleccionada
	}
	return false;
}
 
              
        </script>
            
        
    </h:head>
    <h:body onload="init()">
                <div id="text">
          <ol id="ofereitors" ></ol>
        </div>
        
         <div id="free">
         
           
            <a href='#' onclick='return mostrar();'> Mostrar  </a>
            
            
        </div>
          <div id="freeInv">
         
           
            <a href='#' onclick='return freeClose();'> Ocultar </a>
           
        </div>

        
        
        <div id="map"></div>
        <div id="displaybox" style="display: none;" ></div>
        <div id="lalala">
            <a id='overlai' href='javascript:void(viewer.show(0))'> Promociones !!! </a><br></br><a id='overlai' href='#' onclick='var algo2=ocultar();   return clicker();'>Regresar al mapa</a>
        </div>
    </h:body>
</html>

